<template>
  <div>
    <nav-bar :title="'个人信息'" />
    <div class="container">
      <van-cell-group class="warp">
        <van-cell
          title="头像"
          is-link
        >
          <div class="avatar">
            <img :src="userInfoList.photo">
          </div>
        </van-cell>
        <van-cell
          title="昵称"
          is-link
          :value="userInfoList.name"
        />
        <van-cell
          title="简介"
          is-link
          value="暂无内容"
        />
      </van-cell-group>
      <van-cell-group>
        <van-cell
          title="性别"
          is-link
          :value="userInfoList.gender === 1 ? '女' : '男'"
        />
        <van-cell
          title="生日"
          is-link
          :value="userInfoList.birthday"
        />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  name: 'PersonalInformation',
  data() {
    return {

    };
  },
  methods: {
    ...mapActions('user', ['updateUserInfoList']),
    ...mapActions('user', ['updateUserList']),
  },
  computed: {
    ...mapState('user', ['userInfoList']),
    ...mapState('user', ['userList']),
  },
  created() {
    this.updateUserInfoList();
    this.updateUserList();
  }
}
</script>

<style lang="less" scoped>
@import url('../../assets/style/common.less');
.container {
  background-color: #f5f5f5;
  width: 100%;
  height: 100vh;

  .warp {
    margin-bottom: 20px;

    .avatar {
      .avatar(12px);
    }
  }
}
</style>
